<template>
    <div style="margin-bottom: 60px;" class="full-box">
        <header class="base-header">
            <i class="icon" @tap='back'></i>
            <h1 style="font-size:16px;">消息列表</h1>
        </header>
        <div class="news full-box clearfix" style="margin-top:60px">
            <!--下拉刷新容器-->
            <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
              <div class="mui-scroll">
                <!--数据列表-->
                <div class="mui-table-view mui-table-view-chevron">
                    <div class="no-tips" v-if="data.tips.length===0" style="background:#efeef4;width:100%;height:360px;text-align:center;color:#bbb;">
                      <img src="../../public/images/notips.png" style="width:200px;" alt="">
                      <span style="font-size:14px;">您还没有相关消息</span>
                    </div>
                    <div class="mui-table-view-cell mui-media" style="padding-right:15px;" v-for="item in data.tips" @tap="goToOrderDetail(item.orderId,item.id)" >
                        <div class="news-title" style="font-size:14px;">
                            <span class="mui-badge mui-badge-warning" v-if="!item.readStatus"></span>
                            订单{{getStatusString(item.orderStatus)}}
                            <span class="msg-time">{{formatDate(item.sendTime)}}</span>
                        </div>
                        <span>
                            <img class="mui-media-object mui-pull-right" :src="item.itemImage">
                            <div class="mui-media-body">
                                <p class="mui-ellipsis title" style="padding-top:0;padding-bottom:0;padding-left:0;font-size:14px;">{{item.content}}</p>
                                <p class='mui-ellipsis'>运单号:{{item.orderNum}}</p>
                            </div>
                        </span>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
  require('../../public/images/add.png');
  require('../../public/images/arrow-left.png');
  import store from '../mall-store';
  export default {
    data: function () {
      return {
        data: store.state
      };
    },
    methods: {
      goToOrderDetail: function (orderId, tipId) {
        store.putTipChange(tipId);
        location.href = '../../we/index.html#!/orderType/' + orderId;
      },
      back: function () {
        window.history.back(-1);
      },
      getStatusString: function (status) {
        var str = '';
        switch (status) {
          case 0:
            str = '待发货';
            break;
          case 1:
            str = '已发货';
            break;
          case 2:
            str = '已完成';
            break;
          case 3:
            str = '已取消';
        }
        return str;
      },
      formatDate: function (s) {
        var date, year, month, day;
        date = new Date(s);
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
        return year + '-' + month + '-' + day;
      },
      loadmore: function () {
        store.getTips(this.data.tipsPager.pageSize, this.data.tipsPager.pageNo);
      }
    },
    created: function () {
      store.getTips(this.data.tipsPager.pageSize, this.data.tipsPager.pageNo);
    },
    ready: function () {
      this.$nextTick(function () {
        mui.init({
          pullRefresh: {
            container: document.getElementById('refreshContainer'),
            up: {
              heigth: 150,
              auto: false,
              contentrefresh: '正在加载...',
              contentnomore: '没有更多数据了',
              callback: this.loadmore
            }
          }
        });
      });
    }
  };
</script>
